<!DOCTYPE html>
<html lang="utf-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('存量客户登记列表')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="gray-bg">
<div class="container">
    <div class="row" style="margin-top: 5px">
        <span style="margin-left: 15px;color: red;font-size: 14px">注意:选择“新增客户“导入时，导入模版中“归属支行或部门“字段为必填字段</span>
    </div>
    <div class="row" style="margin-top: 5px">
        <div class="col-sm-10">
            <div class="file-loading">
                <input id="fileinput-demo-1" name="file" data-show-caption="true" type="file" multiple>
            </div>
        </div>
        <div class="col-sm-2">
            <a class="btn btn-primary" onclick="downloadImpOldCustTemplate()">导入模板下载</a>
        </div>
    </div>
</div>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript" th:inline="javascript">
    var prefix = ctx + "ecard/imp/merchantImport";

    $(function () {
        $("#fileinput-demo-1").fileinput({
            uploadUrl: prefix + '/importOldCust',
            uploadAsync: true,
            enctype: 'multipart/form-data',
            showPreview: false,
        }).on('filepreupload', function (event, data, previewId, index) {     //上传中
            //清空上传错误列表数据
            $("#bootstrap-table").bootstrapTable('removeAll');
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            console.log('文件正在上传');
        }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
            console.log('文件上传成功！');
            console.log('文件上传成功！' + JSON.stringify(data.response));

            if (data.response.code == '0') {
                $.modal.alertSuccess(data.response.msg);
            } else {
                $.modal.alertError(data.response.msg);
                //判断有无错误提示数据，如果有需在列表上展示数据
                if (data.response.data) {
                    $("#bootstrap-table").bootstrapTable('append', data.response.data);
                }
            }

        }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！' + data.id);
            debugger;
        })

        var options = {
            url: prefix + "/list",
            pagination: false,//不分页
            firstLoad: false,//首次不加载数据
            showSearch: false,//不显示搜索框内容
            showPageGo: false,//不显示跳转
            showRefresh: false,//不显示刷新
            showColumns: false,
            showToggle: false,
            modalName: "导入错误信息列表",
            columns: [{
                checkbox: true
            },
                {
                    field: 'row',
                    title: '行号',
                },
                {
                    field: 'name',
                    title: '姓名',
                },
                {
                    field: 'phoneNumber',
                    title: '手机号',
                },
                {
                    field: 'userCode',
                    title: '管户人工号',
                },
                {
                    field: 'error',
                    title: '错误信息'
                }]
        };
        $.table.init(options);
    });

    // 下载模板
    function downloadImpOldCustTemplate() {
        $.modal.loading("正在导出模板，请稍候...");
        $.post(prefix + "/downloadImpOldTemplate", function (result) {
            if (result.code == web_status.SUCCESS) {
                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
            } else if (result.code == web_status.WARNING) {
                $.modal.alertWarning(result.msg)
            } else {
                $.modal.alertError(result.msg);
            }
            $.modal.closeLoading();
        });
    }
</script>
</body>
</html>